<template>
  <div>
    <div class="title">5分钟车流量检测图</div>
    <div class="content-container" ref="chartLine"></div>
  </div>
</template>

<script>
  import $ from 'jquery';
  import _ from 'lodash';
  import highcharts from 'highcharts';

  import * as Constant from './common/Constant';
  import highchartConfig  from './chartConfig/HighchartConfig';
  import testData from './common/TestData';

  export default {
    name: 'CarMinute',
    data() {
      return {
        chartDataLine: {},
        chartLine:null,
      }
    },
    computed: {},
    methods: {
      updateChart(){
        let me = this;
        if(!this.chartLine){
          this.chartLine = highcharts.chart(this.$refs.chartLine, this.chartDataLine)
        }else{
          this.chartLine.series[0].setData(this.chartDataLine.series[0].data)
        }
        setTimeout(me.getData, Constant.INTERVAL*1000)
      },
      getData(){
        let me = this;

        let configDataLine = {
          name: '5分钟车流量监测图',
          legend: ['监测点1','监测点2'],
          time: [],
          data: [],
          colors:['#FBBB76', '#56D9FF','#8cff9b'],
          showLegend: false,
        };

        if(Constant.LOCAL){
          // 按理来说横向是时间，纵向是数量，location代表不同线
          // 可是这里时间对不上，不统一，没办法作为横向
          let data = {"2":[{"location":"2","timeStamp":"1529427319809","traffic":"67"},{"location":"2","timeStamp":"1529427389693","traffic":"76"}],"4":[{"location":"4","timeStamp":"1529427329699","traffic":"81"},{"location":"4","timeStamp":"1529427349696","traffic":"73"},{"location":"4","timeStamp":"1529427359697","traffic":"52"}],"6":[{"location":"6","timeStamp":"1529427339693","traffic":"83"},{"location":"6","timeStamp":"1529427349696","traffic":"3"}]}
          configDataLine.time = Object.keys(data);
          configDataLine.legend =  Object.keys(data);
          for (let key in configDataLine.time){
            let target = data[configDataLine.time[key]];
            target = target.map(item=>{return parseInt(item.traffic) || 0})
            configDataLine.data.push(target)
          }
          me.chartDataLine = highchartConfig.getLineConfig(configDataLine);
          me.updateChart();
        }else{
          $.get(Constant.HOST+'fiber/get5MinuteVehicleFlow',function(data){
            configDataLine.time = Object.keys(data);
            configDataLine.legend =  Object.keys(data);
            for (let key in configDataLine.time){
              let target = data[configDataLine.time[key]];
              target = target.map(item=>{return parseInt(item.traffic) || 0})
              configDataLine.data.push(target)
            }
            me.chartDataLine = highchartConfig.getLineConfig(configDataLine);
            me.updateChart();
          }).fail(err=>{
            setTimeout(me.getData, Constant.INTERVAL*1000)
          })
        }
      }
    },
    mounted() {
      this.getData();
    },
    created() {

    }
  }
</script>

<style lang="stylus" scoped>
  .content-container
    margin-top: 20px
</style>
